<template>
  <div class="data-line">
    <div class="title"> 数据统计 </div>
    <Chart :options="option" height="88%"></Chart>
  </div>
</template>

<script lang="ts">
  import { ref, defineComponent } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import { userSleep } from '@/api/dashboard';

  export default defineComponent({
    props: {
      id: {
        type: [String, Array],
        default: '0',
      },
      name: {
        type: [String, Array],
        default: '',
      },
    },
    setup: (props) => {
      const option = ref({
        grid: {
          left: 40,
          right: 40,
          top: 20,
          bottom: 40,
        },
        tooltip: {
          trigger: 'axis',
          position(pt: any[]) {
            return [pt[0], '10%'];
          },
        },
        color: ['#4370F8'],
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: `${props.name}睡眠时长`,
            data: [],
            type: 'bar',
            smooth: true,
            barMaxWidth: '32px',
          },
        ],
      });
      const initOption = async () => {
        const { code, msg, data } = await userSleep({ userId: props.id });
        if (code !== 200) {
          Message.error(msg);
          return;
        }
        option.value.xAxis.data = data.map(
          (item: { [x: string]: any }) => item.create_time
        );
        option.value.series[0].data = data.map(
          (item: { [x: string]: any }) => item.user_sleep
        );
      };
      initOption();
      return {
        option,
      };
    },
  });
</script>

<style lang="less" scoped>
  .data-line {
    height: 300px;
  }
  .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-2);
    line-height: 28px;
    margin-bottom: 22px;
  }
</style>
